<template>
	<view class="container" >
		<view class="status_bar">
			<view style="margin-left: 4%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></u-icon></view>
			<view style="margin-left: -50upx; font-weight: bold;">个人信息</view>
			<view style="margin-right: 30upx;" @tap="tosetInformation(itemArr)"><u-icon name="more-dot-fill"
					size="24"></u-icon></view>
		</view>
		<view class="head flex-row">
			<view class="flex-row">
				<!-- <view>{{itemArr}}</view> -->
				<!-- <image v-if="user.face" :src="user.face" class="face"></image> -->
				<image v-if="itemArr.user_avatar_file_name"
					:src="`http://chat.zwsmcn.com:8090/UserAvatarDownloader?action=ad&user_uid=${itemArr.user_uid}&user_local_cached_avatar=${itemArr.user_avatar_file_name}&enforceDawnload=1&token=`"
					class="face">
				</image>
				<image v-else src="../../static/img/face.png" class="face"></image>
				<view class="info-box">
					<view class="info-name">{{ itemArr.remark === null ? itemArr.nickname : itemArr.remark }}
					</view>
					<view class="info-num">账号:<span style="color: #666666;">{{itemArr.user_uid}}</span></view>
				</view>
			</view>
		</view>
		<view class="shop-box">
			<view class="con-shop" @tap="gopyq(itemArr)">
				<view style="display: flex;">
					<view style="margin-top: 10upx;">朋友圈</view>
				</view>
				<uni-icons type="arrowright" size="18" color="#eaeaea"></uni-icons>
			</view>
			<view class="con-shop" @tap="goremrk(itemArr)">
				<view style="display: flex;">
					<view style="margin-top: 10upx;">设置备注</view>
					<view class="box">{{itemArr.remark}}</View>
				</view>
				<uni-icons type="arrowright" size="18" color="#eaeaea"></uni-icons>
			</view>
			<view class="con-shop" @tap="gopnone(itemArr)">
				<view style="display: flex;">
					<view style="margin-top: 10upx;">电话</view>
					<view class="box">{{itemArr.mobile_num}}</View>
				</view>
				<view>
					<uni-icons type="arrowright" size="18" color="#eaeaea"></uni-icons>
				</view>
			</view>
			<view class="con-shop" @tap="gotag(itemArr)">
				<view style="display: flex;">
					<view>标签</view>
				</view>
				<view style="display: flex;">
					<view style="margin-left: 10px;" v-if="userInfo" v-for="(item, index) in userInfo">{{item.tag_name}}
					</view>
					<uni-icons type="arrowright" size="18" color="#eaeaea"></uni-icons>
				</view>
			</view>
		</view>
		<view class="shop-box">
			<view class="con-shop" @tap="towhatsup(itemArr)">
				<view style="display: flex;">
					<view style="margin-top: 10upx;">更多信息</view>
				</view>
				<uni-icons type="arrowright" size="18" color="#eaeaea"></uni-icons>
			</view>
		</view>
		<view class="chat-btn" v-if="userId != this.option" @tap="toDetail(itemArr)">发起聊天</view>
		<!-- #ifdef APP -->
		<view class="chat-btn" v-if="userId != this.option && !is_add_friend" @tap="showtype = true">音视频通话</view>
		
		<!-- #endif -->
		
		<!-- -->
		<view v-if="userId != this.option && is_add_friend" class="chat-btn-add">加为好友</view>

		<u-popup :show="showtype" mode="bottom" round="16" @close="showtype = false">
			<view class="pup-content">

				<view class="pup-list" style="border-radius: 10px 10px 0rpx 0rpx;" @tap="btnVideo">
					<view class="tittle">视频通话</view>
				</view>
				<view class="pup-list" @tap="btnVoice">
					<view class="tittle">语音通话</view>
				</view>

				<view class="pup-list1" @tap="showtype = false">
					<view class="tittle">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId') || '',
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				value2: true,
				user: {},
				userInfo: '',
				lableValue: '',
				itemArr: '',
				option: '',
				isGroup: 0,
				showtype: false,
				is_add_friend: false,
			}
		},
		onLoad(options) {
			uni.$on('refreshList', () => {
				this.gettag();
			});
			this.option = options.user_uid
			console.log(this.option)
			console.log(this.userId)
			this.gettag()
			this.getfriend()
			// this.getfriendlist(options.user_uid)
		},
		onShow() {
			this.getfriendlist(this.option)
			uni.$on('update', function(data) {
				//console.log('监听到事件来自 update ，携带参数 msg 为：' + data);
				this.lableValue = data;
				console.log(this.lableValue, 333)
			})
			

			

		},
		methods: {
			// 获取标签
			gettag() {
				uni.request({
					url: this.$api.baseUrl + '/api/user/friend/messageAndRemark',
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_uid: uni.getStorageSync('user_uid'),
						friend_user_uid: this.option
					},
					method: 'POST',
					success: res => {
						console.log(res);
						console.log(res, 'res');
						// uni.hideLoading()
						if (res.data.code == 0) {

							this.itemArr = res.data.data
							this.itemArr.relatedId = this.option
							this.itemArr.userAvatar = this.itemArr.user_avatar_file_name
						}
						console.log(this.itemArr);
						// this.list = res.data;
					},
					fail: res => {
						console.log(res);
					}

				})
			},
			getfriend() {
				let open = this.DB.isOpen();
				console.log("open-=-=-=-==-==-", open);
				if (open) {
					// 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
					let userinfo;
					let where = ` user_uid = ${this.option}`;
					this.DB.selectTableDataNew("friend" + uni.getStorageSync("user_uid"), where)
						.then(res => {
							console.log("contact表数据-=-=-=-==-==-", res);
							if (res.length > 0) {
								this.is_add_friend = false;
							} else {
								this.is_add_friend = true;
							}


						})
						.catch(error => {
							console.log("查询失败", error);

						});
				} else {
					// this.$util.toast("数据库未打开");
					this.DB.openSqlite()
						.then(res => {
							console.log("数据库已打开");
							this.getfriend();
						})
						.catch(error => {
							console.log("数据库开启失败");
						});
				}
				return;


				uni.request({
					url: this.$api.baseUrl + '/api/common/missu_roster/fetch',
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_id: uni.getStorageSync('user_uid'),
						friend_user_uid: this.option,
					},
					method: 'POST',
					success: res => {
						console.log(res);

					},
					fail: res => {
						console.log(res);
					}

				})
			},
			goremrk(item) {
				this.toPage('/pages/contacts/edittRemark?groupId=' + JSON.stringify(item));
			},
			gopnone(item) {
				this.toPage('/pages/contacts/edittphone?groupId=' + JSON.stringify(item));
			},
			gotag(item) {
				this.toPage('/pages/contacts/addLable?groupId=' + JSON.stringify(item));
			},
			// 获取信息
			getfriendlist(id) {
				//  
				const newDataObj = {
					"use_mail": "0", // "1"表示用好友的 mail 地址查找，否则表示用好友的 uid 查找
					"friend_mail": "", // 用户或好友的 mail 地址
					"friend_uid": id, // 用户或好友的 uid
					"my_uid": uni.getStorageSync('user_uid')
				};
				const newDataJsonStr = JSON.stringify(newDataObj)
				const requestData = {
					"processorId": '1008',
					"jobDispatchId": '3',
					"actionId": '8',
					// "token":uni.getStorageSync('token'), 
					"token": "123123123123",
					"newData": newDataJsonStr
				};
				const requestDataJsonStr = JSON.stringify(requestData);
				uni.request({
					url: 'http://chat.zwsmcn.com:8090/rest_post',
					header: {
						'content-type': 'application/json'
					},
					data: requestDataJsonStr,
					method: 'POST',
					success: res => {
						console.log(JSON.parse(res.data.returnValue))
						// uni.hideLoading()
						// this.itemArr = JSON.parse(res.data.returnValue)
						//  const updateInfoStr = JSON.stringify(res.data.returnValue);
						console.log(this.itemArr, "--------------");
						//  const updateInfoObj = JSON.parse(updateInfoStr);
						//  console.log(updateInfoObj);
						// console.log(JSON.parse(res.data.returnValue).new_uid);


						console.log(this.itemArr)
					},
					fail: res => {
						console.log(res);
					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},


			// 朋友圈
			gopyq(item) {
				let s_item = {};
				s_item.user_uid = item.user_uid
				this.toPage('/pages/discover/circleFrienda?groupId=' + JSON.stringify(s_item));
			},
			// 详情
			toDetail(item) {
				let typeu = 3;
				if (this.is_add_friend) {
					typeu = 42;
				}
				this.$api.globalData = item;
				uni.setStorageSync('globalData', this.$api.globalData)
				this.toPage('/pages/index/index?typeu=' + typeu+'&receiverInput='+item.user_uid);
				// this.toPage('/pages/index/index?typeu=' + typeu + '&groupId=' + JSON.stringify(item));
			},
			// 更多信息
			towhatsup(item) {
				this.toPage('/pages/contacts/informationMore?groupId=' + JSON.stringify(item));
			},
			tosetInformation(item) {
				console.log(item);
				this.toPage('/pages/contacts/setInformation?groupId=' + JSON.stringify(item));
			},
			async btnVoice() {
				let typeu = 3;
				if (this.is_add_friend) {
					typeu = 43;
				}
				this.$api.globalData = this.itemArr;
				uni.setStorageSync('globalData', this.$api.globalData)
				
				uni.navigateTo({
					url: '/pages/index/index?typeu=' + typeu+'&receiverInput='+this.itemArr.user_uid,
					success: (res) => {
						res.eventChannel.emit('notesInfo', {
							'message_type': 'Voice',
							'receiverInput':this.itemArr.user_uid,
							'typeu':typeu
						});
					}
				})
				// this.toPage('/pages/index/index?message_type=Voice&typeu=' + typeu + '&groupId=' + JSON.stringify(this
				// 	.itemArr));
				return;

				let permisionID = '';
				permisionID = 'android.permission.RECORD_AUDIO';
				var result = await permision.requestAndroidPermission(permisionID)
				var strStatus = '';
				if (result == 1) {
					strStatus = "已获得授权"

				} else if (result == 0) {
					strStatus = "未获得授权"
					console.log(strStatus)
				} else {
					strStatus = "被永久拒绝权限"
					uni.showModal({
						content: permisionID + strStatus,
						showCancel: false
					});
				}


			},
			async btnVideo() {
				let typeu = 3;
				if (this.is_add_friend) {
					typeu = 43;
				}
				this.$api.globalData = this.itemArr;
				uni.setStorageSync('globalData', this.$api.globalData)
				uni.navigateTo({
					url: '/pages/index/index?typeu=' + typeu+'&receiverInput='+this.itemArr.user_uid,
					success: (res) => {
						res.eventChannel.emit('notesInfo', {
							'message_type': 'Video',
							'receiverInput':this.itemArr.user_uid,
							'typeu':typeu
						});
					}
				})
				// this.toPage('/pages/index/index?message_type=Video&typeu=' + typeu + '&groupId=' + JSON.stringify(this
				// 	.itemArr));
				return;



			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		overflow: hidden;
	}

	.box {
		font-size: 12px;
		line-height: 30px;
		margin-left: 20px;
	}

	.container {
		width: 100%;
		height: 100%;
		background: #f4f7fc;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 90upx;
		background: #fff;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;
		padding-bottom: 60upx;

		.face {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		.info-name {
			font-size: 40upx;
			font-weight: bold;
		}

		.info-num {
			padding: 2upx 0upx;
			border-radius: 30upx;
			margin-top: 21upx;
			color: #5d5d5d;
		}

		.copybtns {
			color: #4457a4;
			margin-top: 21upx;
		}

		.info-box {
			margin-left: 30upx;
		}
	}

	.shop-box {
		background-color: #fff;
		padding: 0upx 40upx;
		color: #2e2e2e;
		font-weight: 300;
		margin-top: 14upx;
		margin-bottom: 14upx;

		.con-shop {
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.chat-btn {
		background-color: #fff;
		text-align: center;
		color: #2f6dc2;
		font-weight: 300;
		padding: 36upx;
		border-bottom: solid 1px #f0f0f0;
	}

	.chat-btn-add {
		background-color: #2f6dc2;
		;
		color: #fff;
		width: 80%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		border-radius: 10px;
		margin-left: 10%;
		position: fixed;
		bottom: 20px;
	}

	.pup-content {
		width: 100%;
		// padding-bottom: 20upx;
		background: #999;
		// border-radius: 16rpx 16rpx 0rpx 0rpx;

		.pup-list1,
		.pup-list {
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-top: 40upx;
			padding: 20upx;
			// padding-left: 24upx;
			// padding-right: 24upx;
			background: #FFFFFF;

			.tittle {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.pup-img {
				width: 24rpx;
				height: 24rpx;
				margin-left: 30upx;
			}
		}

		.pup-list1 {
			margin-top: 10px;
		}

		.pup-btn {
			width: 92%;
			height: 88rpx;
			background: #00D4E2;
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 24upx;
			position: fixed;
			bottom: 20upx;
			margin-left: 24upx;
		}
	}
</style>